<template>
    <el-row :gutter="20">
        <el-col :span="6" v-for="role in StaffStore.allFuncs" :key="role.clsr_id">
            <el-card>
                <div>{{ role.clsr_name }} </div>
                <div class="btn-wrapper">
                    <el-button type="primary" size="default" @click="beginUpdate(role)">编辑</el-button>
                    <el-button type="primary" size="default" @click="removeHandler(role.clsr_id)">删除</el-button>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card @click="beginAdd">
                <div>+</div>
            </el-card>
        </el-col>
    </el-row>
    <el-dialog v-model="clsrEdit.isEdit" title="角色编辑">
        <el-form :model="clsrEdit.model" :rules="clsrEdit.rules" :ref="(el: any) => clsrEdit.formRef = el">
            <el-form-item label="角色名称:" prop="clsr_name">
                <el-input v-model.trim="clsrEdit.model.clsr_name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save">确定</el-button>
                <el-button @click="clsrEdit.isEdit = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, markRaw, nextTick } from "vue";
import { ClassroomApi } from "@/api";
import { ElMessageBox, ElMessage, FormInstance, FormRules } from "element-plus";
import { useClassroom } from "@/store";
const list = ref<Array<HttpPayload.Classroom>>([])
const StaffStore = useClassroom();
onMounted(async () => {
    try {
        StaffStore.init();

    } catch (e) {
        /**/
    }
});
const clsrEdit = reactive<{ isEdit: boolean; formRef: null | FormInstance; model: HttpPayload.Classroom; rules: FormRules }>({
    isEdit: false,
    model: { clsr_id: 0, clsr_name: "", clsr_occupy: -1 },
    formRef: null,
    rules: markRaw({
        clsr_name: [
            {
                validator: (type, value, callback) => {
                    if (value === "") callback(new Error("*角色名不能为空"));//非空验证
                    else if (value.length < 2 || value.length > 20) //长度验证
                        callback(new Error("*角色名长度2-20"));
                    else if (list.value.some((role) => role.clsr_name === value && role.clsr_id !== clsrEdit.model.clsr_id))//唯一性验证
                        callback(new Error("*角色名已存在"));
                    else callback();
                },
                trigger: "blur",
            },
        ],
    }),
});
const beginUpdate = (clsr: Vm.Classroom) => {
    clsrEdit.model.clsr_id = clsrEdit.model.clsr_id;
    clsrEdit.model.clsr_name = clsrEdit.model.clsr_name;
    clsrEdit.model.clsr_occupy = clsrEdit.model.clsr_occupy;
    clsrEdit.model = { ...clsr }
    nextTick(() => clsrEdit.isEdit = true)
};
const removeHandler = async (clsr_id: number) => {
    try {
        //问用户是不是确定删除
        await ElMessageBox.confirm("真删", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        });
        // 发ajax从数据库中删除功能
        //await ClassroomApi.remove(clsr_id);
        //从list中删除功能,更新页面
        const i = list.value.findIndex((item) => item.clsr_id === clsr_id);
        list.value.splice(i, 1);
        ElMessage({ type: "success", message: "功能删除成功" });
    } catch (e) {
        /**/
    }
};
const beginAdd = async () => {
    try {
        clsrEdit.model.clsr_id = 0;
        clsrEdit.model.clsr_name = "";
        clsrEdit.model.clsr_occupy = -1
        nextTick(() => clsrEdit.isEdit = true)
    } catch (e) {
        /**/
    }
};
const save = async () => {
    try {
        if (clsrEdit.model.clsr_id === 0) {
            const clsr_id = await ClassroomApi.add(clsrEdit.model);
            list.value.push({ ...clsrEdit.model, clsr_id });
        } else {
            await ClassroomApi.update(clsrEdit.model);
            const i = list.value.findIndex(
                (item) => item.clsr_id === clsrEdit.model.clsr_id
            );
            list.value.splice(i, 1, { ...clsrEdit.model });
        }
        nextTick(() => clsrEdit.isEdit = false),
            ElMessage({ type: "success", message: "功能编辑成功" });
    } catch (e: any) {
        ElMessage({ type: "error", message: e.message });
    }
};
</script>
<style scoped lang="stylus">
.el-row
        width 100%
        .el-card
            position relative
            .btn-wrapper
                position:absolute
                top:0
                left:0
                width 100%
                height 100%
                background-color rgba(0,0,0,0.7)
                display:none
            &:hover .btn-wrapper
                display:flex
                justify-content:center
                align-items:center
</style>